<template>
    <div class="container">
        <el-form :model="formData" :rules="rules" ref="formRef">
            <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
                <el-input v-model="formData.name" autocomplete="off" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="日期" :label-width="formLabelWidth" prop="birthday">
                <el-date-picker v-model="formData.birthday" type="date" placeholder="请选择日期" style="width:100%"
                    value-format="YYYY-MM-DD" clearable />
            </el-form-item>
            <el-form-item label="日期类型" :label-width="formLabelWidth">
                <el-radio-group v-model="formData.dateType" value='string'>
                    <el-radio-button value="1">公历</el-radio-button>
                    <el-radio-button value="2">农历</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <!-- <el-form-item label="提醒" :label-width="formLabelWidth">
                <el-select v-model="formData.remindDate" placeholder="请选择提醒日期" multiple>
                    <el-option v-for="item in remindDateOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item> -->
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="formData.remark" autocomplete="off" type="textarea" placeholder="请输入备注" />
            </el-form-item>
        </el-form>
        <div class="dialog-footer">
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleSubmit">
                保存
            </el-button>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { v4 as uuidv4 } from 'uuid';
import { ElMessage } from 'element-plus'

const formRef = ref(null)

const props = defineProps({
    person: {
        type: Object
    },
    category: {
        type: Number
    },
});

const emit = defineEmits(["cancel", "submit"])

const formLabelWidth = '80px'

const rules = reactive({
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    birthday: [{ required: true, message: '请选择出生日期', trigger: 'change' }]
})

let formData;
if (!props.person) {
    formData = reactive({
        name: '',
        birthday: formatDateTime(new Date()),
        dateType: '1',
        // remindDate: ['0']
    })
} else {
    formData = reactive({
        ...props.person
    })
}

// const remindDateOptions = [
//     { value: '0', label: '当天' },
//     { value: '1', label: '提前1天' },
//     { value: '3', label: '提前3天' },
//     { value: '7', label: '提前7天' }
// ]

function formatDateTime(date) {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return `${year}-${pad(month)}-${pad(day)}`;
}

function pad(num) {
    return num.toString().padStart(2, '0');
}

// 提交
function handleSubmit() {
    formRef.value.validate((valid) => {
        if (valid) {
            const birthdayData = {
                ...formData
            }
            // 新增
            if (!birthdayData._id) {
                birthdayData._id = 'birthday/' + uuidv4();
                birthdayData.createTime = Date.now();
            }
            // 编辑
            else {
                birthdayData.updateTime = Date.now();
            }
            birthdayData.category = props.category;
            // birthdayData.remindDate = Object.values(birthdayData.remindDate);
            window.utools.db.put(birthdayData);
            ElMessage.success('保存成功！');
            emit('submit');
        } else {
            ElMessage.error('请完善生日信息！');
            return false;
        }
    });
}

// 取消
function handleCancel() {
    emit('cancel');
}
</script>

<style scoped>
.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}

.add-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #007bff;
    color: white;
    border-radius: 50%;
    font-size: 24px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
}

.dialog-footer {
    text-align: right;
}
</style>